<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>login</title>
	<link ref="stylesheet" type="text/css" href="./login.css"/>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: Arial;
		}
		
		a {
			text-decoration: none;
		}
		
		h1,h2,h3,h4,h5,h6 {
			margin: 0;
		}
		
		.login {
			border: 2px solid;
		}

		.login_title {
			text-align: center;
		}

		.login_title .title {
			font-weight: 500;
		}

		.login_title .txt {
			display: block;
			font-size: 16px;
			color: #666;
		}
		
		.login_input .firstName,
		.login_input .lastName,
		.login_input .submit,
		.login_input .password,
		.login_input .email {
			width: 100%;
			height: 40px;
		}

		.login_input .input {
			width: 100%;
			height: 100%;
			font-size: 14px;
			border: 1px solid;
		}

		.login_input .submit {
			background: #2eabb7;
			color: #fff;
			font-size: 18px;
			text-align: center;
			border: none;
			cursor: pointer;
		}
		
		.login_input .submit:hover {
			color: #f5f5f5;
			background: rgba(46, 171, 183, .9);
		}

		.login_forgot {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
		}

		.login_forgot .forgot {
			color: #2eabb7;
			font-size: 14px;
			font-weight: 550;
		}

		.login_or {
			position: relative;
			color: #ccc;
			font-size: 16px;
			text-align: center;
		}

		.login_or::before,
		.login_or::after {
			content: '';
			position: absolute;
			width: 42%;
			height: 1px;
			background: #ccc;
			top: 50%;
		}

		.login_or::before {
			left: 0;
		}

		.login_or::after {
			right: 0;
		}

		.google,
		.facebook {
			position: relative;
			display: block;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 14px;
			color: #fff;
		}

		.facebook {
			background: #8299c9;
		}
			
		.google {
			background: #d98f8f;
		}
		
		.google::before,
		.facebook::before {
			content: '';
			position: absolute;
			width: 29px;
			height: 29px;
			left: 20px;
			top: 5px;
		}
		
		.facebook::before {
			background: url('./facebook.png');
			background-size: 29px 29px;
		}
		
		.google::before {
			background: url('./google.png');
			background-size: 29px 29px;
		}
		
		.facebook:hover {
			background: rgba(130, 153, 201, .9);
			color: #f5f5f5;
		 }
		
		.google:hover {
			background: rgba(217, 143, 143, .9);
			color: #f5f5f5;
		}
		
		.login_tips {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		.login_tips .title {
			text-align: center;
			font-size: 16px;
		}

		.login_tips .txt {
			font-size: 16px;
			color: #2eabb7;
			display: block;
			font-weight: 550;
		}
		@media screen and (min-width: 768px) {
			.login {
				width: 350px;
				margin: 0 auto;
			}
		}
		@media screen and (max-width: 420px) {
			.login {
				border: transparent;
			}
		}
	</style>
	<style>
		.ptb20 {
			padding-top: 20px;
			padding-bottom: 20px;
		}
		.plr20 {
			padding-left: 20px;
			padding-right: 20px;
		}
		
		.mb30 {
			margin-bottom: 30px;
		}
		
		.mb20 {
			margin-bottom: 20px;
		}
		
		.mb10 {
			margin-bottom: 10px;
		}
		
		.mb5 {
			margin-bottom: 5px;
		}
		
		.plr15 {
			padding-left: 15px;
			padding-right: 15px;
		}
		
		.ptb15 {
			padding-top: 15px;
			padding-bottom: 15px;
		}
		
		.plr10 {
			padding-left: 10px;
			padding-right: 10px;
		}
	</style>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<div class="login plr20 ptb20">
					<div class="login_title mb20">
						<h1 class="title mb10">Eyecedar Glasses</h1>
						<span class="txt">Start by creating your account</span>
					</div>
					<div class="login_input mb20">
						<div class="firstName mb20">
							<input class="input plr15" type="text" placeholder="First Name" name="firstName">
						</div>
						<div class="lastName mb20">
							<input class="input plr15" type="text" placeholder="Last Name" name="lastName">
						</div>
						<div class="email mb20">
							<input class="input plr15" type="text" placeholder="Email" name="email">
						</div>
						<div class="password mb20">
							<input class="input plr15" type="password" placeholder="Password" name="password">
						</div>
						<div class="password mb20">
							<input class="input plr15" type="password" placeholder="Confirm password" name="password">
						</div>
						<input type="submit" value="Create account" class="submit">
					</div>
					<div class="login_or mb20">OR</div>
					<div class="login_other mb30">
						<a href="" class="facebook mb20">Sign in width Facebook</a>
						<a href="" class="google mb20">Sign in width Google</a>
					</div>
					<div class="login_tips">
						<h3 class="title plr10">Have an account?</h3>
						<a href="./signIn.html" class="txt plr10">Sign in</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
